
<script setup lang="ts" type="module">
import {
  ref,
  onMounted,
  watch,
  reactive,
  onUpdated,
  toRefs,
  toRef,
  Ref,
  defineEmits,
  defineProps,
  defineExpose,
} from "vue";
import { useRouter, RouterView } from "vue-router";
import { ElMessage } from "element-plus";
import { uploadVideo, uploadFilePrivate, uploadImgPublic,commonUploadImage } from "@/apis/http";
const imageUrl: any = ref("");
let excelName = ref("");
const isLoading = ref(false);
let uploadClass: Ref<string[]> = ref(["mp4"]);
const flag = ref(false);
const emit = defineEmits([
  "businessLicense",
  "cardZheng",
  "shipVideo",
  "picturesShips",
  'cardFan',
  "Permit",
  "Auction"
]);
let data: any = ref();
//上传文件格式
const formatData = ref(["docx", "doc", "xls", "xlsx", "pdf", "zip", "rar"]);
//上传视频格式
const formatDatas = ref(["mp4"]);
//上传图片
const formatDataImg = ref(["jpeg", "jpg", "png", "gif"]);
const props = defineProps<{
  checkOut?: number;//上传类型（三种 文件，图片，视频）
  title?: string;//回显注释
  color?: string;//注释颜色
  httpurl?: string;//地址（暂无作用）
  echoImg?: Array<object>;//回显数据
  multiple?: boolean;//是否多个上传
  limit?: string;//暂无作用
  width?: string;//整体宽度
  btnTrue?: string;//是否显示按钮
  filePathUrl?:boolean;//上传私有 共有
}>();
const uploadFileList: any = ref([]);
const fileName: any = ref([]);
const uploadEle: any = ref(null);

watch(
  () => props.echoImg,
  (val) => {
    if (uploadFileList.value.length == 0) {
      uploadFileList.value = val;
    }
    emit("picturesShips", uploadFileList.value);
    emit("businessLicense", uploadFileList.value);
    emit("cardZheng", uploadFileList.value);
    emit("cardFan", uploadFileList.value);
    emit("Permit", uploadFileList.value);
    emit("Auction", uploadFileList.value);
  }
);

const changeFileLength = (file: any, fileList: any) => {
  uploadEle.value.clearFiles();
};
const uploadAction = (option: any) => {
  isLoading.value = true;
  flag.value = false;
  console.log(option);
  data =
    props.checkOut == 1
      ? formatData
      : props.checkOut == 2
      ? formatDatas
      : formatDataImg;
  let param = new FormData();
  param.set("file", option.file);

  for (var i of data.value) {
    if (option.file.name.indexOf(i) != -1) {
      flag.value = true;
    }
  }
  console.log(flag.value);
  if (flag.value == false) {
    isLoading.value = false;
    ElMessage.error("文件仅" + props.title);
    return false;
  } else if (option.file.size / 1024 / 1024 > 30) {
    isLoading.value = false;
    ElMessage.error("上传文件大小不能超过 30MB");
    return false;
  }

  if (props.checkOut == 1) {
    uploadFilePrivateLoad(param, option.file.name);
  } else if (props.checkOut == 2) {
    console.log(param);
    uploadVideoLoad(param);
  } else {
    if(props.filePathUrl){
      uploadImgLoad(param);
    }else{
      uploadImgPublicLoad(param);
    }
    
  }
};
//文件上传
function uploadFilePrivateLoad(param: any, name: any) {
  uploadFilePrivate(param).then((res: any) => {
    if (res && res.code === 0) {
      isLoading.value = false;
      // imageUrl.value = res.data.filePath;
      uploadFileList.value.push(res.data);
      fileName.value.push(name);
      excelName.value = "1.doc";
      // emit("messageUrl", uploadFileList.value);
      // emit("messageName", fileName);
      ElMessage.success("文件上传成功！");
    } else {
      isLoading.value = false;
      if (res && res.msg) {
        ElMessage.error(res.msg);
      } else {
        ElMessage.error("文件上传失败！");
      }
    }
  });
}
//视频上传
function uploadVideoLoad(param: any) {
  uploadVideo(param).then((res: any) => {
    if (res && res.code === 0) {
      isLoading.value = false;
      uploadFileList.value.push(res.data);
      console.log(uploadFileList);
      emit("shipVideo", uploadFileList.value);
      ElMessage.success("视频上传成功！");
    } else {
      isLoading.value = false;
      if (res && res.msg) {
        ElMessage.error(res.msg);
      } else {
        ElMessage.error("视频上传失败！");
      }
    }
  });
}
//图片上传私有
function uploadImgLoad(param: any) {
  commonUploadImage(param).then((res: any) => {
    if (res && res.code === 0) {
      isLoading.value = false;

      uploadFileList.value.push(res.data);
      emit("picturesShips", uploadFileList.value);
    emit("businessLicense", uploadFileList.value);
    emit("cardZheng", uploadFileList.value);
    emit("cardFan", uploadFileList.value);
    emit("Permit", uploadFileList.value);
    emit("Auction", uploadFileList.value);
      ElMessage.success("图片上传成功！");
    } else {
      isLoading.value = false;
      if (res && res.msg) {
        ElMessage.error(res.msg);
      } else {
        ElMessage.error("图片上传失败！");
      }
    }
  });
}
//图片上传共有
function uploadImgPublicLoad(param: any) {
  uploadImgPublic(param).then((res: any) => {
    if (res && res.code === 0) {
      isLoading.value = false;

      uploadFileList.value.push(res.data);
      emit("picturesShips", uploadFileList.value);
    emit("businessLicense", uploadFileList.value);
    emit("cardZheng", uploadFileList.value);
    emit("cardFan", uploadFileList.value);
    emit("Permit", uploadFileList.value);
    emit("Auction", uploadFileList.value);
      ElMessage.success("图片上传成功！");
    } else {
      isLoading.value = false;
      if (res && res.msg) {
        ElMessage.error(res.msg);
      } else {
        ElMessage.error("图片上传失败！");
      }
    }
  });
}
//点击删除
const delImg = (index: any) => {
  console.log(index, uploadFileList);
  uploadFileList.value.splice(index, 1);
  fileName.value.splice(index, 1);
  emit("picturesShips", uploadFileList.value);
    emit("businessLicense", uploadFileList.value);
    emit("cardZheng", uploadFileList.value);
    emit("cardFan", uploadFileList.value);
    emit("Permit", uploadFileList.value);
    emit("Auction", uploadFileList.value);
};
//清空
const closeList = () => {
  console.log(123);

  uploadFileList.value = [];
};

//暴露state和play方法
defineExpose({
  closeList,
});
</script>

<template>
  <div class="Upload">
    <ul class="uploadImg">
      <li
        v-for="(item, index) in uploadFileList"
        :key="index"
        :style="
          props.checkOut == 2
            ? 'width:200px'
            : '' + props.width
            ? 'width:' + props.width + ';height:120px'
            : ''
        "
      >
        <div v-if="uploadFileList && checkOut == 1" class="checkWj">
          <img src="@/assets/images/wenjian.jpeg" alt="" />
          <p v-if="item.filename">{{ item.filename }}</p>
        </div>
        <video
          v-if="uploadFileList && checkOut == 2"
          :src="item.OSSUrl"
          class="video-avatar"
          :autoplay="false"
          controls
          muted
        ></video>
        <img
          v-if="uploadFileList && checkOut == 3"
          :src="item.OSSUrl"
          class="avatar"
        />
        <div class="del" @click="delImg(index)"><span>X</span> 删除</div>
      </li>
      <li
        :style="props.width ? 'width:' + props.width : ''"
        v-show="uploadFileList.length == 0"
      >
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="uploadAction"
          :on-change="changeFileLength"
          :id="imageUrl ? 'isborder' : ''"
          :multiple="multiple"
          ref="uploadEle"
          v-if="uploadFileList.length == 0"
          v-loading="isLoading"
        >
          <div>
            <el-button v-if="props.btnTrue == 'no' ? false : true"
              >上传文件</el-button
            >
            <span v-if="checkOut == 1">{{
              title ? title : "支持docx,doc,xls,xlsx,pdf,zip,rar格式"
            }}</span>
            <span v-else-if="checkOut == 2">{{
              title ? title : "支持avi、mp4、wmv格式"
            }}</span>
            <span v-else :style="props.color ? 'color:' + props.color : ''">{{
              title
                ? title
                : "支持JPG，JPEG，PNG，GIF,上传图片大小不能超过 10MB"
            }}</span>
          </div>
        </el-upload>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
@import "./index.scss";
#isborder {
  border: 1px solid #eee;
}
</style>
